[Alpha Camp] 電商網頁切版初體驗


Posted by OsmandLN on 2021-12-14

  • 你為何會選擇這個專案?
    現在電商平台極為常見,如果以求職市場的需求做為出發點,能夠用CSS切出一個簡潔俐落的網頁畫面是不可或缺的技能,故選擇以此切入做練習。

  • 你使用了什麼技術?
    考量工具上的適用性,就排版方面: 區塊間的流動性排版使用了Grid system,而在區塊內元素則使用Flex system做調整,而在定位方面則使用到了position去做父層及子層間相對位置的設定,在實穿照的顯示方面,則是透過opacity屬性的數值變化搭配hover這個psuedo class去做出效果。

  • 哪部分你相對能掌握?哪裡花了最多時間?
    在基本屬性如字體、顏色及背景設定及flex properties使用上(對應到區塊內元素的排版)相對比較有把握,而在運用position設定相對位置及RWD排版上,反而比較苦手。

  • 過程中碰到什麼困難?又如何克服?(例如:查找網路文件)
    不了解星形選擇器的使用,查找他人技術部落格的解說

  • 過程中你有對哪個前端技術有特別深刻的學習?
    RWD的實現,因為隨著螢幕尺寸的變化,頁面的呈現上會有一定程度的變動,需要去思考如何讓頁面可以朝著目標的layout呈現出來,也需要在使用者體驗與呈現更多資訊兩者之間,盡力去找到平衡。


#layout #css







Related Posts

redis 套件的 Property 'on' does not exist on type 'RedisClientType'

redis 套件的 Property 'on' does not exist on type 'RedisClientType'

Deploy express app in Heroku with cleardb

Deploy express app in Heroku with cleardb

JavaScript 五四三 Ep.04 Array.prototype.map()

JavaScript 五四三 Ep.04 Array.prototype.map()


Comments